<template>
  <div class="box" :style="{ ...background, color }">
    <div class="title">{{ title }}</div>
    <div class="total">{{ total }}</div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    props: {
      title: {
        type: String,
        default: 'Hello',
      },
      total: {
        type: Number,
        default: 0,
      },
      background: {
        type: Object,
        default: () => ({
          'background-color': '#ffb199',
          'background-image':
            'linear-gradient(133deg, #ffb199 0%, #ff6188 100%)',
        }),
      },
      color: {
        type: String,
        default: '#000000',
      },
    },
    setup: () => {
      return {};
    },
  });
</script>

<style lang="less" scoped>
  .box {
    width: 278px;
    height: 160px;
    border-radius: 16px;
    padding: 24px;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      line-height: 19px;
    }
    .total {
      font-size: 32px;
      font-weight: 600;
      color: #ffffff;
      line-height: 38px;
      margin-top: 16px;
    }
  }
</style>
